<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta charset="utf-8">
    <title>jquery mobiscroll 2.17.1 demo</title>
    <link rel="stylesheet" type="text/css" href="../../../cross/css/cross.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/demo.css" />
   
   
</head>
<body>

<div class="demo-wrap c-main">
    <h2 class="demo-title c-f16">mobiscroll 手机端日期控件</h2>
    <div class="plr20">
    
        <h4 class="demo-head c-f16">年月日:</h4> 
        <input name="test" type="text" data-time="date" value="2011-11-11" readonly="readonly" class="c-border" />
        
<pre>
    var opt1 = {
        preset: 'date',
        theme: 'ios',
        lang:'zh',
        maxDate: new Date(2016,5,30)
    };
    $('input[data-time=date]').mobiscroll(opt1);
</pre>
        
        
        
        <h4 class="demo-head c-f16">年月日+时间:</h4> 
        <input name="test" data-time="datetime" readonly="readonly" class="c-border" />
        
<pre>
    var opt2 = {
        preset: 'datetime',
        theme: 'ios',
        lang:'zh'
    };
    $('input[data-time=datetime]').mobiscroll(opt2);
</pre>     
        
        <h4 class="demo-head c-f16">时间:</h4> 
        <input name="test" data-time="time" readonly="readonly" class="c-border" />

<pre>
    var opt3 = {
        preset: 'time', //日期
        theme: 'ios',
        lang:'zh'
    };
    $('input[data-time=time]').mobiscroll(opt3);
</pre>



        <h4 class="demo-head c-f16">年月:</h4>
        <input name="test" type="text" data-time="yearMoon" value="" readonly="readonly" class="c-border" />

<pre>
    var opt5 = {
        preset: 'date',
        dateOrder: 'yymm',
        dateFormat: 'yymm',
        theme: 'ios',
        lang:'zh',
    };

    $('input[data-time=yearMonn]').mobiscroll(opt5);
</pre>


        <h4 class="demo-head c-f16">指定时间:</h4> 
        <input name="test" data-time="giventime" value="9" readonly="readonly" class="c-border" />

<pre>
	var opt4 = {
        theme: 'ios',
        lang:'zh',
        formatValue: function (d) {
            return d.join(',');
        },
        customWheels:true,
        wheels: [//如果值非常多请事先按需求生成好
            [ 
                {
                    keys:['1','2','3'],
                    values: ['8', '9', '10']
                }
            ]
        ],
        onSelect: function(valueText, inst){
            console.info(valueText)
            var dd=eval("["+valueText+"]");
            $('input[data-time=giventime]').val(dd[0].values);
        },
        onShow:function(){
            ss.mobiscroll('selectWheel', ['2'] , 1000 ,true);
        }
    };
    var ss=$('input[data-time=giventime]').mobiscroll(opt4);
</pre>

    </div>



</div>

<ul>
	
</ul>
<script type="text/javascript" src="../../../cross/js/jquery/2.1.3/jquery.js"></script>
<script type="text/javascript" src="js/mobiscroll.js"></script>
<link rel="stylesheet" type="text/css" href="css/mobiscroll.css" />


<script type="text/javascript">
$(function(){

		 var opt1 = {
             preset: 'date',
             theme: 'ios',
             lang:'zh',
             maxDate: new Date(2016,5,30)
		};
		$('input[data-time=date]').mobiscroll(opt1);
		
		
		var opt2 = {
			preset: 'datetime',
			theme: 'ios',
			lang:'zh'
		};
		$('input[data-time=datetime]').mobiscroll(opt2);
		
		
		var opt3 = {
			preset: 'time', //日期
			theme: 'ios',
			lang:'zh'
		};
		$('input[data-time=time]').mobiscroll(opt3);
		
		
		
		
		var opt4 = {
			theme: 'ios',
			lang:'zh',
			formatValue: function (d) {
				return d.join(',');
			},
			customWheels:true,
			wheels: [//如果值非常多请事先按需求生成好
				[ 
					{
						keys: ['1', '2', '3', '4'],
						values: ['0', '1', '2', '3']
					},
					{
						keys: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
						values: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
					},
					{
						keys: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
						values: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
					}

				]
			],
			onSelect: function(valueText, inst){
				console.info(valueText)
				var dd=eval("["+valueText+"]");
				$('input[data-time=giventime]').val(dd[0].values+'-'+dd[1].values+'-'+dd[2].values);
			},
			onShow:function(){
				ss.mobiscroll('selectWheel', ['4'] , 1000 ,true);
			}
		};
		var ss=$('input[data-time=giventime]').mobiscroll(opt4);


        var opt5 = {
            preset: 'date',
            dateOrder: 'yymm',
            dateFormat: 'yymm',
            theme: 'ios',
            lang:'zh',
        };

        $('input[data-time=yearMoon]').mobiscroll(opt5);

})
</script>
</body>
</html>